import React from 'react';
import { DatePicker, Cascader, Button } from 'antd';
import './Header.css';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const options = [
    {
        label: '事假',
        value: '事假',
    },
    {
        label: '病假',
        value: '病假',
    },
    {
        label: '其他假',
        value: '其他假',
    },
];

function Header(props) {
    return (
        <div className='header'>
                <div>
                    考勤日期：<RangePicker defaultValue={[moment('2015-10-02', dateFormat), moment('2015-10-08', dateFormat)]} locale={locale} />
                </div>
                <div>
                    请假类型：<Cascader placeholder="请选择" options={options} />
                </div>
                {props.children}
                <div>
                    <Button type='primary'>查询</Button>
                    <Button type='default'>重置</Button>
                </div>
        </div>
    );
}

export default Header;